<template>
    <div class="flex flex-wrap">
        <sidebar />
        <div class="p-8">
            <ai-writer-nav title="公众号" subtitle="写标题"
                image="https://st0.dancf.com/market-operations/market/side/1689667454937.png"></ai-writer-nav>

            <div class=" my-4 flex justify-between text-sm">
                <div><span class="text-red-500">*</span>内容需求</div>
                <el-popover trigger="hover" width="300px">
                    <template #reference>
                        <div class="cursor-pointer">试试范文</div>
                    </template>
                    <div class="rounded-lg bg-white">
                        <div class="p-2 cursor-pointer hover:bg-gray-100" v-for="(item, index) in tips" :key="index"
                            @click="input = item.desc">
                            {{
                            item.title }}</div>
                    </div>
                </el-popover>
            </div>
            <el-input v-model="input" placeholder="请输入创意描述" :rows="7" type="textarea"></el-input>
            
            <el-button class="my-4 w-full" type="primary" @click="confirm">立即生成</el-button>

        </div>

        <div id="outputbox"  v-if="output" class=" bg-gray-100 p-16 flex-1 ">
                <div v-html="output"></div>
                <div class="text-sm text-gray-500">字数：{{ wordNum }}</div>
        </div>
        <ai-writer-rightbar v-else></ai-writer-rightbar>
    </div>
</template>
<script setup>
useSeoMeta({
    title: '公众号标题AI文案，提升您的阅读量，让标题更有吸引力',
    ogTitle: '公众号标题AI文案，提升您的阅读量，让标题更有吸引力',
    description: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogDescription: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"AI创作,AI写作,AI创作工具,AI文案,明志科技,明志"
})
import { marked } from 'marked'
const input = ref('')
const output = ref('')
const tips = ref([{
    title: '玉渊潭最美赏花季',
    desc: '玉渊潭公园即将迎来最美赏花季'
}, {
    title: '理财入门指南',
    desc: '理财入门应注意的5件事'
}, {
    title: '春季穿搭时尚指南',
    desc: '春季穿搭时尚指南'
}, {
    title: '美妆护肤种草标题',
    desc: '美妆护肤种草标题'
}])

const wordNum = ref(0)

const store = useUserStore();
const showLogin=inject("showLogin")

const confirm = () => {
    if(!store.isLogin){
        showLogin.value=true
        return false;
    }
    if (!input.value) {
        ElMessage.error('创意描述不能为空')
        return false;
    }
    const message = ref('')
    message.value = input.value 

    useEventSource("/api/bailian/chat", { message: message.value }, function (data) {
        output.value = marked.parse(data.output.text)
        wordNum.value = data.output.text.length
    })


}


</script>